<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{layout :: css(~{::title},~{::link})}">
    <title>订单管理页面</title>
    <link rel="stylesheet" th:href="@{/css/dialog.css}"/>
</head>
<body>
<div th:insert="~{layout::sidebar(activeURI='three')}"></div>
<div class="right">
    <div th:insert="~{OrderTop::top(activeURI='one1')}"></div>

    <div style="float: right">

        <label> 搜索</label>
        <input type="text" style="width: 300px;height: 30px" placeholder="全局搜索" id="key">
        <button id="sou" value="搜索" style="background-color: #4CAF50;border: 0px;width: 40px;height: 30px;font-size: medium">搜</button>

</div>


<!--遮挡的div-->
<div class="mask-box"></div>
<!--显示信息的div-->
<div class="dialog-box">
    <button id="close">关闭</button>
    <label>订单信息</label>
        <div class="form-example">
            <label for="orderid">订单编号： </label>
            <input type="text" name="orderid" id="orderid" required readonly="readonly">
        </div>
        <div class="form-example">
            <label for="userid">订单编号： </label>
            <input type="text" name="userid" id="userid" required readonly="readonly">
        </div>
        <div class="form-example">
            <label for="orderdate">订单日期： </label>
            <input type="date" name="orderdate" id="orderdate" required readonly="readonly" style="width: 170px">
        </div>
        <div class="form-example">
            <label for="address">订单地址： </label>
            <input type="text" name="address" id="address" required>
        </div>
        <div class="form-example">
            <label for="name">顾客姓名： </label>
            <input type="text" name="name" id="name" required>
        </div>
        <div class="form-example">
            <label for="accountnumber">付款账号： </label>
            <input type="text" name="accountnumber" id="accountnumber" required>
        </div>
        <div class="form-example">
            <label for="accountmethod">付款方式： </label>
            <input type="text" name="accountmethod" id="accountmethod" required>
        </div>

        <div class="form-example">
            <div>
            <label for="itmelist">订单物品： </label>
            </div>
            <div class="wai" id="wai">

                <!--                <div class="tiao">-->
                <!--                    <div class="tu"></div>-->
                <!--                    <div class="wen">-->
                <!--                        <input type="text" style="width: 60px; "id="bianjiitem1">-->
                <!--                        <label for="">X</label>-->
                <!--                        <input type="text" style="width: 20px;" id="shuliangitem1">-->
                <!--                    </div>-->
                <!--                    <div class="an">-->
                <!--                        <button class="jia" id="jiashu1">+</button>-->
                <!--                        <button class="jia" id="jianshu1">-</button>-->
                <!--                    </div>-->
                <!--                    <div class="xiao" id="xiaochu1"><button class="de">X</button></div>-->
                <!--                </div>-->


            </div>
<!--            <input type="text" name="goods" id="goods" required>-->
            <div class="form-example">
                <label for="additem">添加物品： </label>
                <input type="text" name="additem" id="additem" required>
                <button id="tianjia" value="添加">+</button>
                <div id="leftMenu" style="display: none">
                    <ul>
                        <li th:each="info:${category}"  >[[${info.name}]]
                            <ul >
                                <li th:each="info2:${[info.categoryid]}">[[${info2.name}]]
                                    <ul>
                                        <li class="clitem" th:each="info3:${[info2.productid]}"> <a th:text="${info3.itemid}" ></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="itmelist"><div></div></div>

        </div>
        <div class="form-example">
            <label for="price">订单总价： </label>
            <input type="text" name="price" id="price" required readonly="readonly">
        </div>
        <div class="form-example">
            <label for="address1">收货地址： </label>
            <input type="text" name="address1" id="address1" required>
        </div>
        <div class="form-example">
            <label for="name2">收获姓名： </label>
            <input type="text" name="name2" id="name2" required>
        </div>
        <div class="form-example">
            <input type="button" value="Subscribe!" id="bianjitijiao">
        </div>
</div>

<table border="1"  id="myTable">
    <thead>
    <tr>
        <th>订单编号</th>
        <th>用户ID</th>
        <th>日期</th>
        <th>姓名</th>
        <th>付款账号</th>
        <th>付款方式</th>
        <th>购买物品</th>
        <th>总价</th>
        <th>收获地址</th>
        <th>发货情况</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="orderVO:${orders}">
        <td th:text="${orderVO.orderid}"class="id"></td>
        <td th:text="${orderVO.userid}" ></td>
        <td th:text="${#calendars.format(orderVO.orderDate,'yyyy-MM-dd HH:mm:ss')}"></td>
        <td th:text="${orderVO.shipToFirstname}"></td>
        <td th:text="${orderVO.creditCard}"></td>
        <td th:text="${orderVO.cardType}"></td>
        <td th:text="${orderVO.itemId}"></td>
        <td th:text="${orderVO.totalPrice}"></td>
        <td th:text="${orderVO.shipAddr1}"></td>
        <td class="fa">未发货</td>
        <td>无</td>
        <td>
            <button class="bianji">编辑</button>
            <button class="delete">删除</button>
            <button class="fahuo">发货</button>
        </td>
    </tr>
    </tbody>
</table>
</div>
<div id="submitForm"></div>
<script type="text/javascript" charset="UTF-8" src="js/bianji.js"></script>
<script src="js/sousuo.js" type="text/javascript"></script>
</body>
</html>